<template>
<div class="login_container">
  <div class="box">
    <div class="img">
   <img src="../../assets/img/logo.b5a855ee.png" >
   <!-- <img src="" > -->
  </div>
    <div class="inputbox">

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item prop="username">
    <el-input type="text"   placeholder="账户"
     class="width" v-model="ruleForm.username" autocomplete="off">
<i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
     </el-input>
  </el-form-item>
  <el-form-item  prop="password">
    <el-input type="password" placeholder="密码" class="width" v-model="ruleForm.password" autocomplete="off">
      <i slot="prefix" class="el-input__icon el-icon-loading"></i>
    </el-input>
  </el-form-item>

  <el-form-item class="button">
    <el-button type="primary" @click="submitForm('ruleForm')" >登陆</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
    </div>
  </div>
</div>
</template>

<script>
import { login } from '@/api/user'
export default {
  data () {
    return {
      ruleForm: {
        password: '', // 是接口中的参数名
        username: ''// 是接口中的参数名
      },
      rules: {
        password: [
          // { validator: validatePass, trigger: 'blur' }
          { required: true, message: '请输入账户名称' },
          { min: 5, max: 6, message: '长度在 5 到 6 个字符' }
        ],
        username: [
          { required: true, message: '请输入名密码' },
          { min: 3, max: 6, message: '长度在 3 到 6 个字符' }
        ]
      }
    }
  },
  methods: {
    async submitForm () {
      console.log('111', this.ruleForm)
      try {
        const res = await login(this.ruleForm)// 这个login是引入的接口名字 import引入user.js
        console.log(res)
        if (res.data.meta.status === 400) {
          console.log('校验失败')
        } else {
          this.$store.commit('initUser', res.data.meta)
          this.$router.push('/profile')
        }
        // if(res.data.)
      } catch (err) {
        alert('登陆失败')
      }
      console.log(this.ruleForm)
    }
  }
}
</script>

<style scoped lang='less'>
html,body{
height: 100%;
}
.img{
  position: absolute;
  top: -70px;
  left: 160px;
  z-index: 99;
  width: 100%;
  width: 130px;
  height: 130px;
  border-radius: 100px;
  background-color: #fff;
  text-align: center;
  img{

width: 90%;
height: 90%;
  }
}
.box{
  // position: relative;
background-color: #fff;
    position: absolute;
    // position: relative;
    top: 50%;
    left: 50%;
    width:450px;
    height: 300px;
    margin: -153px 0 0 -196px;
    // z-index: 1;
    .inputbox{
     position: absolute;
     left: -70px;
     top: 100px;
    }
 .button{
   float: right;//让按钮右移
 }
}
.width{
  width: 380px;
}

</style>
